<template>
  <div class="home">
    <!-- 假搜索框 -->
    <searchBar></searchBar>
    
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in imgList" :key="item" @click="onhandler">
        <img :src="item.carouselUrl" alt="" />
      </van-swipe-item>
    </van-swipe>
    
    <!-- 宫格 -->
    <van-grid :column-num="5" :border="false" square class="van-grid">
      <van-grid-item v-for="item in gridData" :key="item.text" @click="onhandle">
        <div :class="item.icon"></div>
        <div class="text">{{ item.text }}</div>
      </van-grid-item>
    </van-grid>
    
    <!-- 商品列表 -->
    
    <ItemList :GoodsList="newGoodsesList">
      <template #title>
        新品上线
      </template>
    </ItemList>
    
    
    <ItemList :GoodsList="hotGoodsesList">
      <template #title>
        <p>热销商品</p>
      </template>
    </ItemList>
    
    
    <ItemList :GoodsList="recommendGoodsesList">
      <template #title>
        <p>最新推荐</p>
      </template>
    </ItemList>
  </div>
  

</template>

<script setup>
import searchBar from "../../components/searchBar.vue";
import ItemList from '../../components/ItemList.vue'



import { onMounted, reactive, ref } from 'vue';
import { homeData } from '../../api/index.js';
import { showToast } from "vant";

let imgList = reactive([])

let newGoodsesList = reactive([])
let hotGoodsesList = reactive([])
let recommendGoodsesList = reactive([])

let gridData = reactive([
  { text: '码路超市', icon: 'iconfont icon-gouwucheman1' },
  { text: '码路服饰', icon: 'iconfont icon-fushi' },
  { text: '全球购', icon: 'iconfont icon-quanqiugou' },
  { text: '码路生鲜', icon: 'iconfont icon-shipin-shengxian-xia' },
  { text: '码路到家', icon: 'iconfont icon-zhisongdaojia' },
  { text: '充值缴费', icon: 'iconfont icon-chongzhi' },
  { text: '9.9元拼', icon: 'iconfont icon-pintuangou' },
  { text: '领券', icon: 'iconfont icon-youhuiquanwenzi' },
  { text: '省钱', icon: 'iconfont icon-shengqian' },
  { text: '全部', icon: 'iconfont icon-quanbu' },
])


onMounted(() => {
  homeData().then(res => {


    res.data.carousels.forEach(element => {
      imgList.push(element)
    });


    res.data.newGoodses.forEach(item => {
      newGoodsesList.push(item)
    });


    res.data.hotGoodses.forEach(item => {
      hotGoodsesList.push(item)
    })


    res.data.recommendGoodses.forEach(item => {
      recommendGoodsesList.push(item)
    })
  })
})

// 点击宫格
let onhandle = () => {
  showToast({
    type: 'fail',
    message: '眼见不一定为实~~',
    duration:1000,
  })
}
// 点击轮播
let onhandler = () => {
  showToast({
    type: 'fail',
    message: '俺也是假嘞，点点别的吧~~',
    duration: 1000,
  })
}

</script>

<style scoped lang="less">
.home{
  width: 100%;
  padding-bottom: 1.5rem;

  .my-swipe .van-swipe-item {
      img {
        width: 100%;
        height: auto;
      }
    }
  
    .van-grid {
      .iconfont {
        font-size: 1rem;
        color: #1BAEAE;
      }
  
      .text {
        font-size: .3rem;
        color: black;
  
      }
    }
}
</style>